{% extends "layout.html" %}
{% load static %}


{% block CSS %}
    <link rel="stylesheet" href="{% static 'css/category.css' %}">
    <title>帖子类别</title>
{% endblock %}

{% block content %}
    {#    <div class="C_container">#}
    {#        {% for category in categories %}#}
    {#            <div class="C_category-box" onclick="location.href='{% url '帖子主页' category.id %}'">#}
    {#                <!--  category.id -->#}
    {#                <h3>{{ category.categoryName }}</h3>#}
    {#                <div class="C_category-details">#}
    {#                    <div class="C_details-column">#}
    {#                        <p><strong>包含贴子数:</strong> {{ category.containNumber }}</p>#}
    {#                        <p><strong>类别公布时间:</strong> {{ category.publishTime }}</p>#}
    {#                    </div>#}
    {#                    <div class="C_details-column">#}
    {#                        <p><strong>点击量:</strong> {{ category.clickNumber }}</p>#}
    {#                        <div>#}
    {#                            <p><strong>类别更新时间:</strong> {{ category.updateTime }}</p>#}
    {#                        </div>#}
    {#                    </div>#}
    {#                </div>#}
    {#            </div>#}
    {#        {% endfor %}#}
    {#    </div>#}
    <div class="category_show_big_div">
        <div class="category_select-header">
            <nav>
                <ul>
                    {% for category in categories %}
                        <li><a href="#" data-page="{{ category.id }}">{{ category.categoryName }}</a></li>
                    {% endfor %}
                </ul>
            </nav>
        </div>

        <main id="AllPosts_Show">
            {% for category in categories %}
                <div class="Posts_big_div" id="{{ category.id }}-content" style="display: none;">
                    <div class="urlbutton">
                        <h3>勇敢说出自己的疑惑或见解吧</h3>
                        <div class="buttondiv" onclick="location.href='{% url 'webboardApp:发表帖子' category.id %}'">
                            <p>跳转</p>
                        </div>
                    </div>
                    {% for post in Posts %}
                        {% if post.category.id == category.id %}
                            <div class="P_post_big" onclick="location.href='{% url 'webboardApp:帖子内容' post.id %}'">
                                <div class="P_post_avatar">
                                    <div class="P_avatar"><a href="{% url 'webboardApp:帖子主页' post.id %}"><img
                                            src="/media/{{ post.UserId.avatar_url }}" alt=""></a>
                                    </div>
                                    <div class="P_name">
                                        <p>{{ post.UserId.username }}</p>
                                    </div>
                                </div>
                                <div class="P_others">
                                    <div class="P_title">
                                        <h3>{{ post.title }}</h3>
                                    </div>
                                    <div class="P_info">
                                        <div class="P_tab_time">
                                            {% if post.tags %}
                                                <p><strong>标签:</strong> {% for tag in post.tags_list %}
                                                    {{ tag.name }}
                                                    {% if not forloop.last %} &nbsp; {% endif %}
                                                {% endfor %}
                                                </p>
                                            {% endif %}
                                            <p>{{ post.publishTime }}</p>
                                        </div>
                                        <div class="P_min_div">
                                            <p>浏览量</p>
                                            <p>{{ post.browseNumber }}</p>
                                        </div>
                                        <div class="P_min_div">
                                            <p>回复量</p>
                                            <p>{{ post.replyNumber }}</p>
                                        </div>
                                        <div class="P_min_div">
                                            <p>点赞量</p>
                                            <p>{{ post.likeNumber }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endfor %}
        </main>
    </div>

    <script type="text/javascript">
        const AllPostsShowDiv = document.getElementById("AllPosts_Show");

        // 获取所有导航链接
        const navLinks = document.querySelectorAll('.category_select-header nav ul li a');

        // 获取所有页面内容区域
        const PostsContents = document.querySelectorAll('.Posts_big_div');
        const FirstPostContent = document.querySelector('.Posts_big_div');
        FirstPostContent.style.display = 'block';

        // 添加点击事件监听器
        navLinks.forEach((link) => {
            link.addEventListener('click', (event) => {
                event.preventDefault(); // 阻止默认链接行为

                // 隐藏所有页面内容区域
                PostsContents.forEach((content) => {
                    content.style.display = 'none';
                });

                // 显示对应的页面内容区域
                const pageName = event.target.dataset.page;
                const targetContent = document.getElementById(`${pageName}-content`);
                targetContent.style.display = 'block';
            });
        });
    </script>
{% endblock %}
